<template>
  <div>
    <el-calendar v-model="calendarValue" class="my-calender" v-if="!reqData.loading">
      <template slot="dateCell" slot-scope="{date, data}">
        <div @click="doClickCalender(data.day)">
          <div class="my-calender-col-day">
            {{ data.day.split('-').slice(1).join('-') }}
          </div>
          <div v-for="row in reqData.tableData" v-if="row.day==data.day">
            <div v-if="column.visibile" class="my-calender-col-item" v-for="column in columnFinalData">
              <span class="my-calender-col-item-label">{{ column.label }}:</span>
              <span class="my-calender-col-item-value">{{ row[column.name] }}</span>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: 'table-calendar',
    props: {
      reqData: {
        type: Object,
        default: () => ({
          tableData: [],
          loading: false
        })
      },
      columnFinalData: {
        type: Array,
        default: () => ([])
      },
      sceneType: {
        type: Number,
        default: 0
      },
      sceneId: {
        type: Number,
        default: 0
      },
      defineSceneId: {
        type: Number,
        default: 0
      }
    },
    computed: {
      loading() {
        return this.reqData.loading
      }
    },
    watch: {
      loading(newData, oldData) {
        if (!newData && oldData) {
          this.addEvent()
          if (this.reqData.tableData.length > 0) {
            this.calendarValue = this.reqData.tableData[0].day
          }
        }
      }
    },
    data() {
      return {
        month: 0,
        dateRange: [],
        calendarValue: ''
      }
    },
    created() {
      var that = this;
      that.month = new Date().getMonth() + 1
    },
    methods: {
      addEvent() {
        var that = this
        this.$nextTick(() => {
          // 点击上个月
          let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
          if (!prevBtn1) {
            setTimeout(() => {
              that.addEvent()
            }, 1000)
            return
          }
          prevBtn1.addEventListener('click', () => {
            that.month = that.month - 1
            this.$$parent(this, "doSearchByMonth", that.month)
          })
          // 点击今天
          let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
          prevBtn2.addEventListener('click', () => {})
          // 点击下个月
          let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
          prevBtn3.addEventListener('click', () => {
            that.month = that.month + 1
            this.$$parent(this, "doSearchByMonth", that.month)
          })
        })
      },
      doClickCalender(date) {
        var myTableData = this.reqData.tableData.filter((row) => {
          return row.day == date
        })
        if (myTableData.length == 0) {
          return
        }
        this.$$parent(this, "doClickCalender", date)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .my-calender .el-calendar-table .el-calendar-day {
    height: auto;
    min-height: 85px;
  }

  .my-calender-col-item {
    padding: 5px 0;
    font-size: 14px;
  }

  .my-calender-col-item-label {}

  .my-calender-col-day {
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
  }
</style>
